<template>
	<view class="">
		<view class="catalog">
			<view class="catalog-title">
				<view v-for="(item,index) in catalogs" :key="index" @click="setId(index)" :class="{active:currentNum==index}">
					{{item.title}}
				</view>

			</view>
			<view class="catalog-list">
				<scroll-view :scroll-y="true" class="catalog-scroll" :scroll-into-view="clickId" :scroll-with-animation=true
				 @scroll="scroll" @scrolltolower="scrolltolower" :style="{height:height}">
					<view class="catalog-item" v-for="(catalog ,i) in catalogs" :key='i'>
						<view class="catalog-item-title" :id="'po'+i">{{catalog.title}}</view>
						<view class="catalog-item-list" v-for="(item,index) in catalog.list" :key="index">
							{{item}}
						</view>
					</view>
				</scroll-view>



			</view>

		</view>
		<uni-notice-bar showIcon="true" single="false" text="['aaaaaa','bbbbbbb','ccccccc','ddddddd']" scrollable="true"></uni-notice-bar>

	</view>
</template>

<script>
	import {
		uniNoticeBar
	} from '@dcloudio/uni-ui'
	export default {
		data() {
			return {
				catalogs: [{
						title: '中餐',
						list: ['盖饭', '扒饭', '咖喱饭', '鸡排饭']
					},
					{
						title: '西餐',
						list: ['牛排', '意面', '芝士', '汉堡']
					},
					{
						title: '法餐',
						list: ['辣子鸡丁', '法国蜗牛', '肥仔快乐水', '法国套餐']
					},
					{
						title: '快餐',
						list: ['薯条', '丸子', '八宝粥', '胡辣汤']
					}
				],
				clickId: "",
				currentNum: 0,
				tops: [],
				height: '200px'
			}
		},
		components: {
			uniNoticeBar
		},
		onLoad() {
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					console.log(res);
					_this.$data.height=res.windowHeight+'px'
				}
			});
		
		},
		onReady() {
			this.getNodesInfo();
			console.log(this.$store)
		},
		methods: {
			setId(index) {
				console.log(index)
				this.clickId = "po" + index;
				this.currentNum = index;
			},
			scroll({
				detail
			}) {
				let scrollTop = detail.scrollTop;
				console.log(scrollTop)
				for (let i = 0; i < this.tops.length; i++) {
					let min = this.tops[i];
					let max = this.tops[i + 1];
					if (scrollTop > min && scrollTop < max) {
						this.currentNum = i;
					}
				}

			},
			scrolltolower() {
				let length = this.tops.length;
				setTimeout(() => {
					this.currentNum = length - 1;
				}, 50)

			},

			getNodesInfo() {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll('.catalog-item-title').boundingClientRect().exec(res => {
					let titles = res[0];
					let tops = []

					titles.map(item => {
						tops.push(item.top)
					})
					this.tops = tops;
					//console.log(tops)
				});


			}
		}
	}
</script>

<style>
	.catalog {
		display: flex;
	}

	.catalog-title {
		width: 100px;
		border: 1px solid #007AFF;

	}

	.catalog-list {
		flex: 1;
		border: 1px solid #C0C0C0;
	}

	.catalog-scroll {
		/* height: 200px; */
	}

	.catalog-item-title {
		font-size: 18px;
		font-weight: bold;
		background-color: #007AFF;
	}

	.active {
		background-color: red;
	}
</style>
